<template>
    <view class="teacher-content">
        <view v-if="equipmentList.length === 0" class="binding">
            <image class="scan" :src="scanQr" mode="" @click="bindDevice"></image>扫码绑定设备
        </view>
        <view v-else class="my_equipment">
            <view class="header">
                <text>我的设备</text>
                <image :src="arrow" mode="" :class="{ up_arrow: false, arrow_icon: true }"></image>
            </view>
            <view v-for="(i, idx) in equipmentList" :key="idx" class="equipment_item">
                <view class="equipment_item_right">
                    <view class="avatar">
                        <image :src="studentHeadImage(1)" mode=""></image>
                    </view>
                    <view class="right">
                        <text class="nickname">{{ i.nickName }}</text>
                        <text class="number">型号：{{ i.model }}</text>
                        <text class="number">序列号：{{ i.serial }}</text>
                    </view>
                </view>
                <view class="equipment_item_left" @click="chooseEquipment(i)">
                    <image :src="i.checked ? checked : unchecked" mode=""></image>
                </view>
            </view>
            <view class="binding" @click="bindDevice">
                <image class="scan" :src="scanQr" mode=""></image>扫码绑定设备
            </view>
        </view>
        <view class="home_function">
            <view v-for="(i, idx) in functionList" :key="idx" class="item" @click="change(idx)">
                <image class="item_bg" :src="i.bg" mode=""></image>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app';

import { studentHeadImage } from '@/hooks/useImage';
import { onMounted, reactive, ref, watch } from 'vue';

const OSS_URL = import.meta.env.VITE_OSS_HOST;
const scanQr = `${OSS_URL}/iconfont/scan_qr.png`;
const arrow = `${OSS_URL}/iconfont/down_arrow.png`;
const checked = `${OSS_URL}/iconfont/checked.png`;
const unchecked = `${OSS_URL}/iconfont/unchecked.png`;
// #ifdef H5
import {h5Authorization } from '@/store'
const { authorizedLogin } = h5Authorization()
// #endif


const functionList = reactive([
    {
        bg: `${OSS_URL}/urm/home_lock_screen.png`,
    },
    {
        bg: `${OSS_URL}/urm/home_desktop_preview.png`,
    },
    {
        bg: `${OSS_URL}/urm/home_video_call.png`,
    },
    {
        bg: `${OSS_URL}/urm/home_time_control.png`,
    },
]);
const equipmentList = ref([
    {
        nickName: '宝子',
        serial: '16234992571504193',
        model: 'M1',
        checked: true,
    },
    {
        nickName: '宝子',
        serial: '16234992571504193',
        model: 'M1',
        checked: false,
    },
    {
        nickName: '宝子',
        serial: '16234992571504193',
        model: 'M1',
        checked: false,
    },
]);
const childrenList = ref([]);

// 选择设备
function chooseEquipment(i) {
    // i.checked = !i.checked
}

function bindDevice() {
    uni.navigateTo({
        url: '/pages/home/bindDevice/index',
    });
}

// 底部点击
function change(e: number) {
    switch (e) {
        case 0:
            uni.navigateTo({
                url: '/pages/home/bindDevice/index',
            });
            break;
        case 3:
            uni.navigateTo({
                url: '/pages/home/TimeManagement/index',
            });
            break;
    }
}

onMounted(async () =>{
    // #ifdef H5
    authorizedLogin()
    // #endif
    
})
</script>

<style scoped lang="scss">
.teacher-content {
    padding: 30upx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .binding {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 120rpx;
        background-color: #fff;
        border-radius: 20rpx;
        border: 2px dashed rgba(97, 93, 255, 1);
        color: rgba(97, 93, 255, 1);
        font-size: 34rpx;
        font-weight: 500;
        line-height: 52rpx;

        .scan {
            width: 40rpx;
            height: 40rpx;
            margin-right: 10rpx;
        }
    }

    .my_equipment {
        background-color: #fff;
        padding: 0 30rpx;
        border-radius: 20rpx;

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 30rpx 0;

            .arrow_icon {
                width: 36rpx;
                height: 36rpx;
            }
        }

        .equipment_item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30rpx 0;
            border-top: 1rpx solid rgba(238, 238, 238, 1);

            &_right {
                display: flex;

                .avatar {
                    width: 100rpx;
                    height: 100rpx;
                    margin-right: 20rpx;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }

                .right {
                    .nickname {
                        display: block;
                        margin-bottom: 10rpx;
                        font-size: 30rpx;
                        line-height: 45rpx;
                        font-weight: 500;
                    }

                    .number {
                        display: block;
                        color: rgba(169, 170, 181, 1);
                        font-weight: 400;
                        font-size: 28rpx;
                        line-height: 42rpx;
                    }
                }
            }

            &_left {
                width: 30rpx;
                height: 30rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .binding {
            height: 100rpx !important;
            border-radius: 0;
            border: none;
            border-top: 1rpx solid rgba(238, 238, 238, 1);
            font-size: 30rpx;
            line-height: 36rpx;

            .scan {
                width: 36rpx;
                height: 36rpx;
            }
        }
    }

    .home_function {
        display: flex;
        flex-wrap: wrap;

        margin-top: 40rpx;

        .item {
            height: 220rpx;
            width: 330rpx;
            margin: 0 30rpx 30rpx 0;

            &:nth-child(2n) {
                margin-right: 0;
            }

            &_bg {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>
